<template>
  <div class="mapbj">
    <img src="@/assets/img/home/ruian.png" usemap="#Map" border="0" style="width: 50.3125rem; height: 33.75rem;" />
    <map name="Map" id="Map">
      <!-- 高楼镇 -->
      <div class="gaolou map_icon" @click="switchMaptwo(1, '高楼镇', '330381125000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="105,76,103,109,93,130,60,141,47,159,33,196,31,221,13,220,8,232,70,357,88,375,146,366,159,364,188,341,203,335,220,355,221,375,238,420,258,388,260,374,247,354,250,333,258,312,238,295,235,268,245,259,269,257,272,231,211,197,188,175,157,115,133,85"
        />
      </div>
      <!-- 湖岭镇 -->
      <div class="huling map_icon" @click="switchMaptwo(2, '湖岭镇', '330381122000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="120,69,141,87,154,98,172,129,190,164,203,183,241,205,288,230,330,234,364,218,462,150,458,127,462,112,473,94,451,70,425,49,397,42,381,38,356,47,350,47,329,27,313,17,272,23,208,11,164,11,132,37"
        />
      </div>
      <!-- 陶山镇 -->
      <div class="taoshan map_icon" @click="switchMaptwo(3, '陶山镇', '330381120000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="470,151,415,198,355,230,392,267,389,287,390,308,412,348,425,351,433,318,448,294,470,322,477,331,498,322,490,297,500,289,515,285,540,253,555,235,590,226,578,194,537,190,514,180,495,144,486,151"
        />
      </div>
      <!-- 马屿镇 -->
      <div class="mayu map_icon" @click="switchMaptwo(4, '马屿镇', '330381116000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="279,231,277,257,243,268,243,291,266,307,257,335,260,363,270,382,251,419,259,448,282,464,323,493,342,490,392,437,399,417,408,400,420,353,395,341,380,311,386,279,384,266,344,233,322,240"
        />
      </div>
      <!-- 仙降街道 -->
      <div class="xianjiang map_icon" @click="switchMaptwo(5, '仙降街道', '330381010000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="419,408,415,396,426,359,436,317,444,302,467,332,482,343,491,332,503,342,497,378,481,384,452,389,430,397" />
      </div>
      <!-- 飞云街道 -->
      <div class="feiyun map_icon" @click="switchMaptwo(6, '飞云街道', '330381009000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="497,381,514,389,534,401,553,420,562,445,601,450,590,422,592,405,582,393,570,376,561,352,563,318,553,303,544,281,537,281,529,286,512,290,506,291,498,299,504,331,506,345,504,363"
        />
      </div>
      <!-- 锦湖街道 -->
      <div class="jinghu map_icon" @click="switchMaptwo(7, '锦湖街道', '330381003000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="591,230,562,239,543,274,561,296,568,315,566,341,569,357,579,379,596,395,616,356,627,339,604,271" />
      </div>

      <!-- 塘下镇 -->
      <div class="tangxia map_icon" @click="switchMaptwo(8, '塘下镇', '330381101000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="613,270,631,327,669,322,701,331,711,340,729,352,752,370,765,390,782,409,794,385,795,365,775,349,763,324,774,308,790,298,790,290,779,267,763,247,738,237,722,234,705,236,673,254,650,266"
        />
      </div>
      <!-- 安阳街道 -->
      <div class="anyang map_icon" @click="switchMaptwo(9, '安阳街道', '330381001000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="652,332,657,354,650,370,637,397,629,404,611,391,604,385,623,364,629,345,632,340" />
      </div>
      <!-- 汀田街道 -->
      <div class="tingtian map_icon" @click="switchMaptwo(10, '汀田街道', '330381008000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="662,327,665,351,686,366,699,383,711,392,729,405,752,437,775,421,762,404,742,378,720,354,700,342,686,332" />
      </div>
      <!-- 莘塍街道 -->
      <div class="shencheng map_icon" @click="switchMaptwo(11, '莘塍街道', '330381007000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="651,388,676,400,693,417,707,438,729,463,750,451,731,417,726,408,708,397,693,387,685,373,666,360" />
      </div>
      <!-- 上望街道 -->
      <div class="shangwang map_icon" @click="switchMaptwo(12, '上望街道', '330381005000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="644,393,644,403,636,406,629,406,629,417,644,432,657,456,677,482,699,499,723,476,711,448,689,425,675,411,663,402" />
      </div>
      <!-- 东山街道 -->
      <div class="dongshan map_icon" @click="switchMaptwo(13, '东山街道', '330381004000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="626,410,608,394,598,405,598,423,604,448,617,467,642,492,666,514,688,503,671,480,651,458,638,444,629,430,627,411" />
      </div>
      <!-- 海滨街道 -->
      <div class="haibin map_icon" @click="switchMaptwo(14, '海滨街道', '330326401000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="563,453,606,455,623,480,649,506,659,520,634,528,622,530,558,508,547,504,544,501,546,488,562,471" />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapRuiAn',

  data () {
    return {
      qxname: '瑞安市',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330381000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName)
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname
          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapbj {
  position: absolute;
  top: 14.5%;
  left: 30%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}
.qxname {
  width: 9.125rem;
  height: 3.4375rem;
  background: url(../../../assets/img/ouhai/ouhai.png);
  background-size: 100% 100%;
  line-height: 3rem;
}
.category {
  width: 9.125rem;
  height: 3.4375rem;
  background: url(../../../assets/img/ouhai/1.png);
  background-size: 100% 100%;
  line-height: 3.4375rem;
}

.gaolou {
  position: absolute;
  top: 24%;
  left: 5%;
}
.huling {
  position: absolute;
  top: 0%;
  left: 24%;
}
.taoshan {
  position: absolute;
  top: 20%;
  left: 53%;
}
.mayu {
  position: absolute;
  top: 44%;
  left: 32%;
}
.xianjiang {
  position: absolute;
  top: 49%;
  left: 50%;
}
.feiyun {
  position: absolute;
  top: 54%;
  left: 59%;
}
.jinghu {
  position: absolute;
  top: 34%;
  left: 64%;
}
.tangxia {
  position: absolute;
  top: 31%;
  left: 82%;
}
.anyang {
  position: absolute;
  top: 47%;
  left: 72%;
}
.tingtian {
  position: absolute;
  top: 47%;
  left: 79%;
}
.shencheng {
  position: absolute;
  top: 54%;
  left: 77%;
}
.shangwang {
  position: absolute;
  top: 70%;
  left: 79%;
}
.dongshan {
  position: absolute;
  top: 66%;
  left: 70%;
}
.haibin {
  position: absolute;
  top: 75%;
  left: 63%;
}
</style>
